<template>
  <div class="button-group_wrap">
    <div 
      class="button_wrap" 
      v-for="(item, index) in btnArr" 
      :key="index"
      :class="{'is-active': type === item.type}" 
      @click="clickBtn(item.type)">{{item.name}}</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      type: 'play'
    }
  },
  props: {
    btnArr: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    clickBtn (type) {
      this.type = type
      this.$emit('click', this.type)
    }
  }
}
</script>
<style lang="scss" scoped>
 .button-group_wrap{
    display: flex;
    .button_wrap{
      text-align: center;
      padding: 6px 15px;
      display: block;
      border: 1px solid #E7E7E7;
      font-size: 14px;
      cursor: pointer;
      color: #505050;
      line-height: 18px;
      position: relative;
      -webkit-box-sizing: border-box !important;
      box-sizing: border-box !important;
      &:nth-child(1){
        border-radius: 2px 0 0 2px;
      }
      &:not(:first-child) {
        border-left: none;
      }
      &.is-active{
        border-color: #00a1d6;
        color: #fff;
        background: #00a1d6;
      }
      &:hover{
        border-color: #00A1D6;
        color: #00A1D6;
        &.is-active{
           color: #fff;
        }
        &::before{
          position: absolute;
          left: -1px;
          top: -1px;
          width: 1px;
          bottom: -1px;
          background: #00A1D6;
          content: ' ';
          display: block;
        }
      }
    }
 }
</style>

